<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue.js -->
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>你的姓名  学号</h1>
			<h2>PM25值={{pm25}}</h2>
			<img :src="`img/${index}.png`" />
			
			<h3>收货人：{{uname}}</h3>
			<h3>收货地址：{{address}}</h3>
		</div>		
		<script type="text/javascript">
			var vm  = new Vue({
				el:"#app",
				data:{
					pm25:200,
					index:0,
					
					uname:"dingding",
					province:"浙江",//省份
					city:"宁波",
					county:"江北区",
					addressDetail:"风华路495号",
				},
				
				created(){
					setInterval(()=>{
						this.pm25 = parseInt(Math.random()*400);						
					},2000);
				},
				
				methods:{
					
				},
				
				computed:{					
					address(){
						return this.province + this.city + this.county + this.addressDetail
					}					
				},
				
				watch:{
					pm25(newValue){
						let index =  0;
						
						if(newValue<100) index=1;
						else if(this.pm25<200) index=2;
						else if(this.pm25 < 300) index =3;
						else index=4;
						
						this.index = index;
						
					}
				}
				
			});
			
		</script>
	</body>
</html>
